<template>
  <dialog_item :dialogTitle="title" :visible.sync="dialogVisible" :appendBody="true" :isNotShowDefaultBtn="true">
    <el-form :model="form" :rules="rules" ref="form" size="mini" label-width="120px" label-position="left">
      <el-row>
        <el-col :span="18">
          <p>{{header}}</p>
          
          <el-form-item label="applicationId:" prop="applicationId" >
            <el-input v-model="form.applicationId"></el-input>
          </el-form-item>
          <el-form-item label="instanceId:" prop="instanceId" v-if="form.bpmFlowType!='start'">
            <el-input v-model="form.instanceId"></el-input>
          </el-form-item>
          <el-form-item label="flowId:" prop="flowId" v-if="form.bpmFlowType=='submit' || form.bpmFlowType=='start'">
            <el-input v-model="form.flowId"></el-input>
          </el-form-item>
          <el-form-item label="userCode:" prop="userCode" >
            <el-select v-model="form.userCode">
              <el-option v-for="(elm,index) in form.userCodeOption" :key="index" :value="elm" :label="elm"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="userCode">
            <el-input v-model="form.userCode"></el-input>
          </el-form-item>
          <el-form-item >
            <p>ps:当可选人过多时,仅显示部分用户以供测试</p>
          </el-form-item>
          <el-form-item label="postBody:"  prop="postBody"  v-if="form.bpmFlowType!='back'">
            <el-input v-model="form.postBody" type="textarea" :rows="3"/>
          </el-form-item>
          <el-form-item >
            <el-button @click="submitFlow('form')">{{header}}</el-button>
          </el-form-item>
          <el-form-item label="返回结果" >
            <el-input v-model="form.back1" type="textarea" :rows="8"/>
          </el-form-item>
        </el-col>
      </el-row>
     
    </el-form>
    <el-form :model="form" :rules="rules2" ref="form2" size="mini" label-width="120px" label-position="left" v-if="form.bpmFlowType=='submit' || form.bpmFlowType=='back'">
      <el-row>
        <el-col :span="18">
          <p>{{title}}</p>
          <el-form-item label="applicationId:" prop="applicationId">
            <el-input v-model="form.applicationId"></el-input>
          </el-form-item>
          <el-form-item label="flowId:" prop="flowId" v-if="form.bpmFlowType=='back'">
            <el-input v-model="form.flowId"></el-input>
          </el-form-item>
          <el-form-item label="instanceId:" prop="instanceId">
            <el-input v-model="form.instanceId"></el-input>
          </el-form-item>
          <el-form-item label="userCode:" prop="userCode">
            <el-select v-model="form.userCode">
              <el-option v-for="(elm,index) in form.userCodeOption" :key="index" :value="elm" :label="elm"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.userCode"></el-input>
          </el-form-item>
          <el-form-item >
            <p>ps:当可选人过多时,仅显示部分用户以供测试</p>
          </el-form-item>
          <el-form-item label="currNodeId:" prop="currNodeId">
            <el-input v-model="form.currNodeId"></el-input>
          </el-form-item>
          <el-form-item label="nextNodeIds:" prop="nextNodeIds">
            <el-input v-model="form.nextNodeIds"></el-input>
          </el-form-item>
          <el-form-item label="comment:" prop="comment">
            <el-input v-model="form.comment"></el-input>
          </el-form-item>
          <el-form-item label="flowType:" prop="flowType">
            <el-select  v-model="form.flowType" v-if="form.bpmFlowType=='submit'">
							<el-option :value="1" label="开始-&gt;手工"></el-option>
							<el-option :value="2" label="开始-&gt;自动"></el-option>
							<el-option :value="42" label="开始-&gt;子流程"></el-option>
							<el-option :value="8" label="终止"></el-option>
							<el-option :value="80" label="提交"></el-option>
							<el-option :value="81" label="退回"></el-option>
							<el-option :value="83" label="运行-&gt;自动"></el-option>
							<el-option :value="85" label="回撤"></el-option>
            </el-select>
            <el-select  v-model="form.flowType" v-if="form.bpmFlowType=='back'">
							<el-option :value="81" label="回退"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="postBody:" prop="postBody">
            <el-input v-model="form.postBody" type="textarea" :rows="3"/>
          </el-form-item>
          <el-form-item >
            <el-button @click="submitBtn2Flow('form2')">{{title}}</el-button>
          </el-form-item>
          <el-form-item label="返回结果" >
            <el-input v-model="form.back2" type="textarea"  :rows="8"/>
          </el-form-item>
        </el-col>
      </el-row>
     
    </el-form>
    </dialog_item>
</template>

<script>
export default {
  props: ["visible","bpmFlowParameter"],
  created() {
    this.form={...this.bpmFlowParameter,...this.form};
    this.form.postBody=JSON.parse(this.form.postBody);

    switch(this.bpmFlowParameter.bpmFlowType){
      case 'start':
        this.title="发起流程";
        this.header="发起流程";
        this.getAllFlowsUser();
        break;
      case 'submit':
        this.form.postBody.id=this.form.docId;
        this.title="提交流程";
        this.header="获取流程提交面板";
        this.getAllFlowsUser();
        this.form.flowType=1;
        break;
      case 'back':
        this.form.postBody.id=this.form.docId;
        this.title="回退流程";
        this.header="获取流程回退面板";
        this.form.flowType=81;
        
        break;
      case 'retrace':
        this.form.postBody.id=this.form.docId;
        this.title="回撤流程";
        this.header="回撤流程";
        this.form.flowType=81;
        
        break;
        
    }
    this.form.postBody=JSON.stringify(this.form.postBody);
    
  },

  data() {
    return {
      title:"发起流程",
      form:{
        userCode:"",
        postBody:JSON.stringify({
          'id':'TEST'+new Date().getTime(),
          'summary':'业务表单摘要描述',
          'items':{'test字段名':'test字段值','name':'hahaha','age':24},
        }),
        flowType:"",
      },
      rules: {
        applicationId: [
          { required: true, message: '请输入applicationId', trigger: 'blur' },
        ],
        instanceId: [
          { required: true, message: '请输入instanceId', trigger: 'blur' },
        ],
        userCode: [
          { required: true, message: '请输入userCode', trigger: 'change' },
        ],
        postBody: [
          { required: true, message: '请输入postBody', trigger: 'blur' },
        ],
      },
      rules2: {
        
        applicationId: [
          { required: true, message: '请输入applicationId', trigger: 'blur' },
        ],
        userCode: [
          { required: true, message: '请输入userCode', trigger: 'change' },
        ],
        postBody: [
          { required: true, message: '请输入postBody', trigger: 'blur' },
        ],
        flowType: [
          { required: true, message: '请输入flowType', trigger: 'blur' },
        ],
        comment: [
          { required: true, message: '请输入comment', trigger: 'blur' },
        ],
        currNodeId: [
          { required: true, message: '请输入currNodeId', trigger: 'blur' },
        ],
        nextNodeIds: [
          { required: true, message: '请输入nextNodeIds', trigger: 'blur' },
        ],
        instanceId: [
          { required: true, message: '请输入instanceId', trigger: 'blur' },
        ],
      },
      header:"发起流程"

    }
  },

  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("ok");
        this.$emit("update:visible", val);
      }
    }
  },

  methods: {
    submitFlow(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.form.accessToken==""){
              this.$message({
                showClose: true,
                message: "请先获取accessToken",
                type: "error"
              });
              return false;
            }
            if(this.form.bpmFlowType=="start"){
              this.form.postBody=JSON.parse(this.form.postBody);
              
              this.$api.startFlow(this.form,this.form.postBody, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "发起成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.back1=JSON.stringify(resp.data.data);
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  
                }
              });
            }else if(this.form.bpmFlowType=="submit"){
              this.form.postBody=JSON.parse(this.form.postBody);              
              this.$api.submissionFlow(this.form,this.form.postBody, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "提交成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  this.form.back1=JSON.stringify(resp.data.data)
                }
              });
            }else if(this.form.bpmFlowType=="back"){            
              this.$api.backsionflow(this.form, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "回退成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  this.form.back1=JSON.stringify(resp.data.data);
                  this.$forceUpdate();
                }
              });
            }else if(this.form.bpmFlowType=="retrace"){  
              this.form.postBody=JSON.parse(this.form.postBody);              
              this.$api.retraceflow(this.form,this.form.postBody, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "回撤成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  this.form.back1=JSON.stringify(resp.data.data);
                  this.$forceUpdate();
                }
              });
            }
            
          } else {
            return false;
          }
        });
      
    },
    submitBtn2Flow(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.form.accessToken==""){
              this.$message({
                showClose: true,
                message: "请先获取accessToken",
                type: "error"
              });
              return false;
            }
            this.form.postBody=JSON.parse(this.form.postBody);
            if(this.form.bpmFlowType=="submit"){
              this.$api.submitFlow(this.form,this.form.postBody, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "提交成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  this.form.back2=JSON.stringify(resp.data.data)
                }
              });
            }else if(this.form.bpmFlowType=="back"){
              this.$api.backFlow(this.form,this.form.postBody, {
                onSucess: resp => {
                  if(resp.data.errcode==0){
                    this.$message({
                      showClose: true,
                      message: "回退成功",
                      type: "success"
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error"
                    });
                  }
                  this.form.postBody=JSON.stringify(this.form.postBody);
                  this.form.back2=JSON.stringify(resp.data.data)
                }
              });
            }

            
            
          } else {
            return false;
          }
        });
      
    },
    getAllFlowsUser(){
      this.$api.getAllFlowsUser(this.form.applicationId, {
        onSucess: resp => {
          this.form.userCodeOption = resp.data.data;
          this.$forceUpdate();
        }
      });
    }
    
  }
};
</script>
<style lang="scss" scoped>
  
</style>